<template>
  <div class="service">
    <el-divider content-position="center" class="title">服务领域</el-divider>
    <div class="cardbox">
      <el-card class="box-card card" v-for="(item,index) in Service" :key="index">
        <div slot="header" class="clearfix cardtitle">
          <el-button type="info" circle>{{index+1}}</el-button>
        </div>
        <div class="text item">
          {{item.introduce}}
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeService',
  data () {
    return {
      Service: [],
      Content: [{
        id: 1,
        desc: '（区域、产业、行业、园区、企业）发展战略、规划设计制定，企业管理架构设计，企业形象品牌建设，组织管理创新、人才与人力资源管理咨询服务。'
      }, {
        id: 2,
        desc: '高新技术企业申报，企业知识产权战略制定、知识产权取得与保护，企业项目可行性报告撰写，科技中介，各类项目申报，税务（加计扣除），商务策划，创业项目指导、培育。'
      }, {
        id: 3,
        desc: '电子商务平台、网站、平台美术设计，企业网络营销（开拓网上业务、网络品牌管理、客户服务），网上国际贸易（跨境电商，网络平台开发国际市场），新型网络服务，电子商务支持系统，电子商务创业，电子商务平台商务、综合管理，电子商务人员培训。'
      }]
    }
  },
  methods: {
    getService () {
      this.$axios({
        method: 'get',
        url: '/area/select'
      }).then((res) => {
        this.Service = res.data.data
      })
    }
  },
  mounted () {
    this.getService()
  }
}
</script>

<style scoped>
.service {
  padding-top: 70px;
  background: #2e3e4f;
  color: #f6f7f9;
  overflow: hidden;
}
.el-divider__text {
  font-size: 45px;
  /* color: #404040; */
  color: white;
  letter-spacing: 4.5px;
  background: #2e3e4f;
}
.servicecontent {
  background: white;
  margin: 50px 50px 0 50px;
  box-shadow: 10px 10px 10px #eeeeee;
  height: 500px;
  overflow: hidden;
}
.text {
  font-size: 18px;
  font-weight: bold;
  line-height: 30px;
}
.item {
  margin-bottom: 10px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box-card {
  width: 480px;
  height: 270px;
}
.card {
  /* display: inline-block; */
  /* display: flex; */
  margin: 50px 100px;
}
.cardtitle {
  text-align: center;
  font-size: 20px;
}
.cardbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>
